<?php
/** @var $model  */
/** @var $this yii\web\View  */

use yii\captcha\Captcha;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ActiveForm;

$jsCode =<<<JSCODE

		function bindPhoneNum(){
			//启用输入框
			$('#captcha').prop('disabled',false);

			var time=30;
			var interval = setInterval(function(){
				time--;
				if(time<=0){
					clearInterval(interval);
					var html = '获取验证码';
					$('#get_captcha').prop('disabled',false);
				} else{
					var html = time + ' 秒后再次获取';
					$('#get_captcha').prop('disabled',true);
				}
				
				$('#get_captcha').val(html);
			},1000);
		}		



JSCODE;

$this->registerJs($jsCode,'POS_END');

?>
<!-- 登录主体部分start -->
<div class="login w990 bc mt10 regist">
    <div class="login_hd">
        <h2>用户注册</h2>
        <b></b>
    </div>
    <div class="login_bd">
        <div class="login_form fl">
            <?php
            $form = ActiveForm::begin();
            echo "<ul>";
            $formStyle = [
                'options'=>['tag'=>'li'],
                'template'=> "{label}\n{input}\n{hint}\n{error}",
                'errorOptions'=>['tag'=>'p','style'=>'color:red'],
            ];


            echo $form->field($model,'username',$formStyle)->textInput([
                'class'=>'txt',
                'placeholder'=>'3-20位字符，可由中文、字母、数字和下划线组成',
            ]);
            echo $form->field($model,'password',$formStyle)->passwordInput([
                'class'=>'txt',
                'placeholder'=>'6-20位字符，可使用字母、数字和符号的组合',
            ]);
            echo $form->field($model,'confirmPassword',$formStyle)->passwordInput([
                'class'=>'txt',
                'placeholder'=>'请再次输入密码',
            ]);
            echo $form->field($model,'email',$formStyle)->textInput([
                'class'=>'txt',
                'placeholder'=>'邮箱必须合法',
            ]);
            echo $form->field($model,'tel',$formStyle)->textInput([
                'class'=>'txt',
                'placeholder'=>'11位手机号码',
            ]);

            echo $form->field($model,'messageCode',[
                'options'=>['tag'=>'li'],
                'template'=> "{label}\n{input}<input type='button' onclick='bindPhoneNum(this)' id='get_captcha' value='获取验证码' style='height: 25px;padding:3px 8px;margin-left: 5px;'/>\n{hint}\n{error}",
                'errorOptions'=>['tag'=>'p','style'=>'color:red'],
            ])->textInput([
                'class'=>'txt',
                'placeholder'=>'请输入短信验证码',
                'disabled'=>'disabled',
                'id'=>'captcha',
            ]);

            echo $form->field($model,'verifyCode',[
                'options'=>['tag'=>'li','class'=>'checkcode'],
                'template'=> "{label}\n{input}\n{hint}\n{error}",
                'errorOptions'=>['tag'=>'p','style'=>'color:red'],
            ])->widget(Captcha::className(),[
                'options'=>['tag'=>'li','class'=>'checkcode'],
                'imageOptions'=>[
                    'alt'=>'验证码',
                    'title'=>'换一个',
                ],
                'template'=> "{input}{image}<span>看不清？<a>换一张</a></span>",
            ]);



            echo <<<TEST
<li><label for="">&nbsp;</label>
<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》
</li>
TEST;

            echo '<li><label for="">&nbsp;</label>'.Html::submitButton('',['class'=>'login_btn']).'</li>';
            echo '</ul>';
            ActiveForm::end();
            ?>

        </div>

        <div class="mobile fl">
            <h3>手机快速注册</h3>
            <p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
            <p><strong>1069099988</strong></p>
        </div>

    </div>
</div>
<script type="text/javascript">
    function bindPhoneNum(){
        //当用户点击是发送ajax,请求
        var url ="<?=Url::to(['member/sms']);?>";

        var csrf = "<?=Yii::$app->request->csrfToken;?>";
        var tel = $("#member-tel").val();
        $.post(url,{tel:tel,'_csrf-frontend':csrf},function (data) {
            console.log(data);
        })
        //启用输入框
        $('#captcha').prop('disabled',false);

        var time=30;
        var interval = setInterval(function(){
            time--;
            if(time<=0){
                clearInterval(interval);
                var html = '获取验证码';
                $('#get_captcha').prop('disabled',false);
            } else{
                var html = time + ' 秒后再次获取';
                $('#get_captcha').prop('disabled',true);
            }

            $('#get_captcha').val(html);
        },1000);
    }
</script>

<!-- 登录主体部分end -->
